<template>
  <up-navbar
      title="商务合作"
      placeholder
      titleStyle="color:black"
      leftIconColor="#000"
      auto-back
      bgColor="#FDE52F"
  >
  </up-navbar>
  <view class="big_box">
    <form :model="form" ref="uForm" :rules="rules" @submit="submit">
      <view class="content_box">
        <up-form-item label="合作类型" label-width="150">
          <up-radio-group v-model="form.type" placement="colupm">
            <up-radio
                v-for="(item, index) in typeList"
                :key="index"
                :label="item.name"
                :name="item.type">
            </up-radio>
          </up-radio-group>
        </up-form-item>
        <up-form-item label="实体" label-width="150">
          <up-radio-group v-model="form.entity">
            <up-radio
                :customStyle="{marginRight: '8px'}"
                v-for="(item, index) in entityList"
                :key="index"
                :label="item.name"
                :name="item.name">
            </up-radio>
          </up-radio-group>
        </up-form-item>
        <up-form-item :label-position="labelPosition" label="选择区域" prop="region" label-width="150">
          <!-- #ifdef MP -->
          <picker @change="onRegionChange" mode="region">
            <text class="category-name">{{ form.city }}</text>
          </picker>
          <!-- #endif -->
          <!-- #ifdef APP-PLUS || H5-->
          <text class="category-name" @click="open" v-if="!packRow">请选择地区</text>
          <view style="display: flex; justify-content: space-evenly;" v-else @click="open">
            <view v-if="packRow" class="title">{{ packRow[0]?.lablel }}</view>
            <view v-if="packRow" class="title">-{{ packRow[1]?.lablel }}</view>
            <view v-if="packRow" class="title">-{{ packRow[2]?.lablel }}</view>
          </view>
          <!-- #endif -->
        </up-form-item>
        <up-form-item label="公司名称:" v-if="form.entity === '企业'" label-width="150">
          <up-input v-model="form.company" placeholder="请输入公司名称"/>
        </up-form-item>
        <up-form-item label="联系人:" label-width="150" prop="contacts">
          <up-input v-model="form.contacts" placeholder="请输入联系人"/>
        </up-form-item>
        <up-form-item label="联系电话:" label-width="150" :border-bottom="false">
          <up-input v-model="form.tel" placeholder="请输入联系电话"/>
        </up-form-item>
        <up-form-item label="团队规模:" label-width="150" :border-bottom="false">
          <up-input v-model="form.team" placeholder="请输入团队规模"/>
        </up-form-item>
        <up-form-item label="预计投入预算:" label-width="150" prop="contacts">
          <up-input v-model="form.plan_put" placeholder="预计投入预算（万元）"/>
        </up-form-item>
        <up-form-item label="有无互联网经验：" label-width="150">
          <up-radio-group v-model="form.is_network">
            <up-radio
                :customStyle="{marginRight: '8px'}"
                v-for="(item, index) in haveExp"
                :key="index"
                :label="item.name"
                :name="item.is_network">
            </up-radio>
          </up-radio-group>
        </up-form-item>
      </view>
      <view style="margin-top: 60rpx;">
        <button class="submit up-button" @click="submit">提交</button>
      </view>
    </form>
  </view>
  <!-- #ifdef APP-PLUS || H5-->
  <fdPicker ref="fdP"
            @change="accepted">
  </fdPicker>
  <!-- #endif -->
</template>
<script setup>

import {ref} from "vue";
import {cooperateAPI} from "../../services";
import {conUtils} from "../../utils/conUtils";
import fdPicker from "../../components/fd-picker/index.vue";

const fdP = ref()
const packRow = ref()
const open = () => {
  fdP.value.reelect()
  fdP.value.show = true
}
const accepted = (e) => {
  packRow.value = e
  form.value.city = packRow.value[0]?.lablel + "-" + packRow.value[1]?.lablel + "-" + packRow.value[2]?.lablel
}

const form = ref({
  city: '请选择区域',
  type: '',
  entity: '',
  company: '',
  contacts: '',
  tel: '',
  team: '',
  plan_put: '',
  is_network: '',
})
const typeList = ref([
  {
    name: '城市代理',
    disabled: false,
    type: 1
  }, {
    name: '推广合作',
    disabled: false,
    type: 2
  }, {
    name: '其他',
    disabled: false,
    type: 3
  }
])
const entityList = ref([
  {
    name: '企业',
    entity: 1
  },
  {
    name: '个人',
    entity: 2
  }
])
const haveExp = ref([
  {
    name: '有',
    is_network: 1
  },
  {
    name: '无',
    is_network: 2
  }
])
const rules = ref({
  type: [
    {
      required: true,
      message: '请选择合作类型',
      trigger: ['change']
    }
  ],
  city: [
    {
      required: true,
      message: '请选择城市',
      trigger: ['change']
    }
  ],
  entity: [
    {
      required: true,
      message: '请选择实体',
      trigger: ['change']
    }
  ],
  contacts: [
    {
      required: true,
      message: '请输入联系人',
      trigger: ['blur', 'change']
    }
  ],
  tel: [
    {
      required: true,
      message: '请输入联系电话',
      trigger: ['blur']
    }
  ],
  team: [
    {
      required: true,
      message: '请输入联系电话',
      trigger: ['blur']
    }
  ],
  plan_put: [
    {
      required: true,
      message: '请输入联系电话',
      trigger: ['blur']
    }
  ],
  is_network: [
    {
      required: true,
      message: '请选择实体',
      trigger: ['change']
    }
  ],
})
const pickerShow = ref(false)
const labelPosition = ref('left')

const onRegionChange = function (e) {
  console.log('onRegionChange', e.detail)
  form.value.city = e.detail.value[0] + "-" + e.detail.value[1] + "-" + e.detail.value[2]
}
const submit = async () => {
  conUtils("form", form)
  if (!form.value.city || !form.value.type || !form.value.entity || !form.value.team || !form.value.plan_put || !form.value.is_network || !form.value.contacts || !form.value.tel) {
    await uni.showToast({
      title: "请填写完整信息",
      icon: 'none'
    })
    return
  }
  if (form.value.city === '请选择区域') {
    await uni.showToast({
      title: "请选择区域",
      icon: 'none'
    })
    return
  }
  const res = await cooperateAPI(form.value)
  await uni.showToast({
    title: res.msg,
    icon: 'none'
  })
  setTimeout(() => {
    uni.navigateBack({
      delta: 1
    })
  }, 1000)
}

const regionConfirm = (e) => {
  form.value.city = e.province.label + '-' + e.city.label + '-' + e.area.label;
}
</script>
<style>
page {
  background-color: #F6F6F6;
  height: 100%;
  width: 100%;
}
</style>
<style lang="scss" scoped>
page {
  background-color: #F6F6F6;
}

.u-status-bar,
.u-navbar__content {
  background-image: linear-gradient(90deg, #ffe62e, #ffe62e);
}
.up-button:after{
  border: none;
}
.submit {
  margin-top: 44rpx;
  width: 690rpx !important;
  height: 80rpx;
  font-size: 32rpx;
  color: #fff;
  border-radius: 40rpx;
  background: linear-gradient(to left, #ffc710, #FECE37);
}
.content_box {
  background-color: #fff;
  border-radius: 10rpx;
  box-sizing: border-box;
  padding: 20rpx 40rpx;
}

.big_box {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  padding: 20rpx;
  position: relative;
  overflow: hidden;
}

.big_box .image {
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  object-fit: cover;
}

</style>
